<template>
  <div class="container">
    <div class="sub">
      <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo no-bottom-border"
          mode="horizontal"
          background-color="#0066bc"
          text-color="rgb(207,203,207)"
          active-text-color="rgb(255,255,255)"
          @select="handleSelect"
      >
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">英雄</el-menu-item>
        <el-menu-item index="3">游戏模式</el-menu-item>
        <el-menu-item index="4">Today's Order</el-menu-item>
      </el-menu>
    </div>
    <div class="main" >
      <a>
        <img
            alt="OP.GG logo (Ekko, the Boy Who Shattered Time)"
            loading="eager"
            width="400"
            height="244"
            decoding="async"

             data-nimg="1" class="object-contain md:w-auto md:flex-grow-0 h-[100%] md:h-auto"
             style="color:transparent;margin-top:-60px;margin-left: 250px"
            src="https://meta-static.op.gg/logo/image/d7cb7fa21b9f4b98495616c414bbc315.png?image=q_auto:good,f_webp,w_auto,h_448&amp;v=1750862487">
      </a>
      <div class="search">

        <div style="width: 32%; height: 100%; ">
        <div class="upselect">
          <span style=" margin-left: 10%;margin-top: 4%" class="text">
            选择地区
          </span>
        </div>
        <select
            v-model="playerData.region"
            class="borderless-select select">
          <option label="Brazil" value="br1" />
          <option label="LAS" value="la1" />
          <option label="LAN" value="la2" />
          <option label="North America" value="na1" />
          <option label="Europe Nordic & East" value="eun1" />
          <option label="Europe West" value="euw1" />
          <option label="Türkiye" value="tr1" />
          <option label="Russia" value="ru" />
          <option label="Japan" value="jp1" />
          <option label="Korea" value="kr" />
          <option label="Southeast Asia" value="sg2" />
          <option label="Taiwan" value="tw2" />
          <option label="Vietnam" value="vn2" />
          <option label="Middle East" value="me1" />
        </select>
        </div>


        <div style="width: 57%; height: 100%;">
          <div class="text" style="margin-top: 10px">
            搜索
          </div>
          <input
              v-model="playerData.name"
              placeholder="玩家名称 + #NA1"
              class="borderless-select"
              @keyup.enter="handleSearch"
          />
        </div>
        <div style="width: 12%; height: 100%; ">
          <button
              class="button"
              @click="handleSearch"
              :loading="loading"
          >
            <span class="button-text">.GG</span>
          </button>
        </div>

      </div>




      <div v-if="errorMessage" class="error-message">
        <el-icon><Warning /></el-icon>
        {{ errorMessage }}
      </div>
    </div>

<!--    <div class="demo-text" v-if="playerData.name || playerData.region">-->
<!--      <div>当前输入: {{ playerData.name }}</div>-->
<!--      <div>当前地区: {{ playerData.region }}</div>-->
<!--    </div>-->

    <div style=" width: 100%; height: 200%;display: flex; justify-content: center; align-content: center; flex-direction: row; gap: 2%; margin-top: 10%">
      <el-card style="max-width: 480px">
        <template #header>Yummy hamburger</template>
        <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%"
        />
      </el-card>
      <el-card style="max-width: 480px">
        <template #header>Yummy hamburger</template>
        <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%"
        />
      </el-card>
      <el-card style="max-width: 480px">
        <template #header>Yummy hamburger</template>
        <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%"
        />
      </el-card>
      <el-card style="max-width: 480px">
        <template #header>Yummy hamburger</template>
        <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%"
        />
      </el-card>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { Search, Warning } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import request from '@/utils/request';
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeIndex2 = ref('1')
const loading = ref(false)
const errorMessage = ref('')

const playerData = reactive({
  region: '',
  name: '',
})

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 处理搜索逻辑
const handleSearch = async () => {
  // 重置错误信息
  errorMessage.value = ''

  // 验证输入
  if (!playerData.name) {
    errorMessage.value = '请输入玩家名称'
    return
  }

  // 拆分玩家名称
  const parts = playerData.name.split('#')
  if (parts.length < 2) {
    errorMessage.value = '名称格式不正确，请使用"用户名#标签"格式'
    return
  }

  // 提取用户名和标签
  const username = parts[0].trim()
  const userTag = parts.slice(1).join('#').trim()

  if (!username || !userTag) {
    errorMessage.value = '用户名和标签不能为空'
    return
  }

  try {
    loading.value = true

    // 调用API接口
    const response = await request.get(
        `/riot/summoner/account/${playerData.region}/${encodeURIComponent(username)}/${encodeURIComponent(userTag)}`
    )

    // 检查响应数据
    if (!response.data || !response.data.puuid) {
      throw new Error('API返回数据无效')
    }

    // 提示成功
    ElMessage.success('玩家信息获取成功')

    // 路由跳转 - 传递所有必要数据
    router.push({
      name: 'summoners',
      query: {
        puuid: response.data.puuid,
        name: username,
        tag: userTag,
        serverRegion: playerData.region,
        profileIconId: response.data.profileIconId,
        summonerLevel: response.data.summonerLevel
      }
    })
  } catch (error) {
    console.error('API请求失败:', error)
    errorMessage.value = '获取玩家信息失败: ' + (error.response?.data?.message || error.message || '未知错误')
    ElMessage.error('获取玩家信息失败')
  } finally {
    loading.value = false
  }
}

const selectedRegion = ref('')
const isFocused = ref(false)
</script>

<style scoped>
.search {
  background-color: rgb(49,49,60);
  width: 42vw;
  height: 6vh;
  margin-top: 30px;
  border-radius: 100px;
  display: flex;
  flex-direction: row;
}

.main {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 120px;

}

.sub {
  text-align: center;
  background-color: #0066bc;
  border-radius: 20px;

}

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.error-message {
  position: absolute;
  bottom: 10px;
  color: #ff4d4f;
  background: #fff2f0;
  padding: 8px 15px;
  border-radius: 4px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.demo-text {
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 10px;
  margin-top: 20px;
  text-align: center;
  width: 600px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.demo-text div {
  margin: 5px 0;
}
.el-menu-demo{
  background: rgb(83,131,232);
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
  ;
}
.no-bottom-border.el-menu--horizontal {
  border-bottom: none !important;

}

.borderless-select {
  width: 100%;
  height: 50%;
  border: none !important;
  outline: none !important;
  background: none;
  color: rgb(131,132,135); /* 继承父元素文字颜色 */
  padding-left: 10%;
  border-bottom-left-radius: 100px;
}

.upselect{
  width: 100%;
  height: 50%;
  border-top-left-radius: 100px;
  color: #feffff;
  display: flex;
  align-content: center;
}

.button{
  width: 100%;
  height: 100%;
  border: none;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  color: rgb(83,131,232);
  background: none;
}


.button-text {
  font-family: 'Arial', sans-serif; /* 可替换为其他字体 */
  font-size: 24px; /* 字体大小 */
  font-weight: 800; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
  text-transform: uppercase; /* 转为大写 */
}

.text{
  color: #ffffff;
  /* 字体样式 */
  font-family: 'Arial', sans-serif; /* 可替换为其他字体 */
  font-size: 13px; /* 字体大小 */
  font-weight: 600; /* 字体粗细 (100-900) */
  letter-spacing: 1px; /* 字符间距 */
}

</style>

